<template>
  <div class="app-container">
    <el-row>
      <el-col :span="24"
        ><div class="grid-content bg-purple-dark">
          listentPort: {{ listentPort }}
        </div></el-col
      >
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-button @click="handleAdd" class="add" type="info" plain
          >新增信息</el-button
        >
      </el-col>
    </el-row>

    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="id" width="95">
        <template slot-scope="scope">
          {{ scope.row.id }}
        </template>
      </el-table-column>
      <el-table-column label="name" width="110">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column label="local_port" width="110" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.local_port }}</span>
        </template>
      </el-table-column>
      <el-table-column label="local_host" width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.local_host }}
        </template>
      </el-table-column>
      <el-table-column label="remote_port" width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.remote_port }}
        </template>
      </el-table-column>
      <el-table-column label="online" width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.online }}
        </template>
      </el-table-column>
      <el-table-column label="ip" width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.ip }}
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增/编辑 -->
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="86%"
      :before-close="handleClose"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="160px"
        class="demo-ruleForm"
      >
        <el-form-item label="ID" prop="id">
          <el-input
            :disabled="title == '编辑' ? true : false"
            v-model="ruleForm.id"
          ></el-input>
        </el-form-item>
        <el-form-item label="name" prop="name">
          <el-input
            :disabled="title == '编辑' ? true : false"
            v-model="ruleForm.name"
          ></el-input>
        </el-form-item>
        <el-form-item label="local_port" prop="local_port">
          <el-input v-model="ruleForm.local_port"></el-input>
        </el-form-item>
        <el-form-item label="local_host" prop="local_host">
          <el-input v-model="ruleForm.local_host"></el-input>
        </el-form-item>
        <el-form-item label="remote_port" prop="remote_port">
          <el-input v-model="ruleForm.remote_port"></el-input>
        </el-form-item>
        <el-form-item label="listentPort" prop="listentPort">
          <el-input v-model="ruleForm.listentPort"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >立即创建</el-button
          >
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {
  getList,
  setBaseConfigAdd,
  setBaseConfigEdit,
  setBaseConfigDel,
} from "@/api/table";
const defaultRuleForm = {
  id: "",
  name: "",
  local_port: "",
  local_host: "",
  remote_port: "",
  listentPort: "",
};
export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "gray",
        deleted: "danger",
      };
      return statusMap[status];
    },
  },
  data() {
    return {
      dialogVisible: false,
      ruleForm: Object.assign({}, defaultRuleForm),
      listentPort: 0,
      list: [],
      listLoading: true,
      title: "",
      rules: {
        id: [{ required: true, message: "不能为空", trigger: "change" }],
        name: [{ required: true, message: "不能为空", trigger: "change" }],
        local_port: [
          { required: true, message: "不能为空", trigger: "change" },
        ],
        local_host: [
          { required: true, message: "不能为空", trigger: "change" },
        ],
        remote_port: [
          { required: true, message: "不能为空", trigger: "change" },
        ],
        listentPort: [
          { required: true, message: "不能为空", trigger: "change" },
        ],
      },
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      this.listLoading = true;
      getList().then((res) => {
        const { code, data } = res;
        if (code === 20000) {
          this.list = [];
          let clients = data.clients;
          let unids = data.unids;
          Object.keys(clients).forEach((key) => {
            let binds = clients[key].binds;
            Object.keys(binds).forEach((name) => {
              this.list.push({
                id: key,
                name: name,
                ...binds[name],
                online: unids[key] ? "在线" : "离线",
                ip: unids[key] ? unids[key].split(":").reverse()[0] : "0.0.0.0",
              });
            });
          });
          this.listentPort = data.listentPort;
        }
        this.listLoading = false;
      });
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.title == "添加") {
            setBaseConfigAdd(this.ruleForm).then((res) => {
              const { code, msg, status } = res;
              if (code === 20000) {
                if (status) {
                  this.$message({
                    message: msg,
                    type: "success",
                  });
                  this.fetchData();
                } else {
                  this.$message.error(msg);
                }

                this.handleClose();
              }
            });
          } else {
            setBaseConfigEdit(this.ruleForm).then((res) => {
              const { code, msg } = res;
              if (code === 20000) {
                this.$message({
                  message: msg,
                  type: "success",
                });
                this.fetchData();
                this.handleClose();
              }
            });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    handleAdd() {
      this.dialogVisible = true;
      if (this.ruleForm.id) {
        this.$refs["ruleForm"].resetFields();
      }
      this.ruleForm.listentPort = this.listentPort;
      this.title = "添加";
    },
    handleEdit(index, row) {
      this.dialogVisible = true;
      this.$nextTick(() => {
        Object.keys(defaultRuleForm).forEach((key) => {
          this.ruleForm[key] = row[key];
        });
        this.ruleForm.listentPort = this.listentPort;
      });
      this.title = "编辑";
    },
    handleDelete(index, row) {
      this.$confirm("确认删除？")
        .then(() => {
          setBaseConfigDel(row).then((res) => {
            const { code, msg } = res;
            if (code == 20000) {
              this.fetchData();
              this.$message({
                message: msg,
                type: "success",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleClose() {
      this.dialogVisible = false;
    },
  },
};
</script>

<style lang="scss">
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.add {
  float: right;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
  display: flex;
  align-items: center;
  padding: 0 6px;
  color: #fff;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
